Panel Card Properties
Description
A Panel Card can be added to component through the 'Panels' menu. Panel cards are useful for defining the different screens, or panels, that a user will see as they navigate through an application on a mobile device. If panel cards are being used inside a component, then every control in that component must be inside a specified panel card. Panel card's come with their own set of properties, listed here:
Panel card type
The panel card type. The type can be either Default or IFrame:
- Type
- Description
- Default
The contents of the Panel Card are defined as controls placed within the Panel Card begin and end controls.
- IFrame
The contents of the Panel Card are loaded from a URL and embedded in an <iframe> HTML element.
IFrame URL
If the Panel card type is IFrame, the URL to load.
Id
The ID of the panel card.
Sub-theme
A sub-theme (display variant) to use for the Panel Card. Choose from sub-themes included in the web theme or a sub-theme you created.
Display name
The display name to be used instead of the Id when the panel name is displayed, such as in a header, footer, or tab in a Panel Navigator.
Panel Class name
One or more classes applied to the entire Panel Card.
Panel body class name
One or more classes applied to the body section of the Panel card.
Panel body style
Set the in-line style for the Panel Card body. Typically you can leave this blank, except for the situation where you display an embedded Component in the Card. In this case, you will typically set the style to
padding: 0px;
Center panel contents
If enabled, centers the contents of the Panel Card in the middle of the panel. Contents will be centered horizontally and vertically.
Has background image
An image used as the background of the Panel Card.
Image name
The background image name. Shown when Has background image is enabled.
Pinch to zoom
Pinch to zoom enables the ability for the user to "pinch zoom" the contents of the Panel card. Pinch zooming is useful for manually magnifying content, such as images or text that may be too small to read on the user's device.
Resetting the Zoom Level
To programmatically reset the zoom level, use the {dialog.object}.unZoomPanelCard() method:
// Reset the zoom level for PANEL_1:
{dialog.object}.unZoomPanelCard('PANEL_1');See Also